<!--
 * @author  dumeng
 设置填空题
-->
<template>
  <div class="question-tiankong">
    <el-form
      ref="tiankongform"
      :model="baseform"
      :rules="baserules"
      class="dataForm nomt"
      label-position="right"
      label-width="140px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="题干" prop="stem">
            <el-input
              v-model.trim="baseform.stem"
              :rows="2"
              type="textarea"
              placeholder="题干这里填写题目描述"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否必答" prop="isMust">
            <el-radio-group v-model="baseform.isMust">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!--图片型填空-->
        <el-col v-if="type === 'WJWTLX_04'" :span="24">
          <el-form-item label="最多上传图片张数">
            <el-col :span="8">
              <el-input-number v-model.trim="limitRange.maxOption" style="width: 100%;" placeholder="请输入最多上传图片张数" controls-position="right" :min="1" :max="9" />
            </el-col>
            <el-col :span="4" style="color:red;margin-left: 10px;">
              最多传9张
            </el-col>
          </el-form-item>
        </el-col>
        <!--整数型填空和小数型填空-->
        <template v-else-if="type === 'WJWTLX_05' || type === 'WJWTLX_06'">
          <el-col :span="24">
            <el-form-item label="最小值">
              <el-col :span="8">
                <el-input-number v-if="type === 'WJWTLX_05'" v-model.trim="limitRange.minOption" style="width: 100%;" :precision="0" placeholder="请输入最小值" :disabled="limitRange.optionFloor" controls-position="right" />
                <el-input-number v-else v-model.trim="limitRange.minOption" style="width: 100%;" placeholder="请输入最小值" :disabled="limitRange.optionFloor" controls-position="right" />
              </el-col>
              <el-col :span="3" style="text-align: right;">
                <el-checkbox v-model="limitRange.optionFloor" label="无限制">不限定</el-checkbox>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="最大值">
              <el-col :span="8">
                <el-input-number v-if="type === 'WJWTLX_05'" v-model.trim="limitRange.maxOption" style="width: 100%;" :precision="0" placeholder="请输入最大值" :disabled="limitRange.optionUpper" controls-position="right" />
                <el-input-number v-else v-model.trim="limitRange.maxOption" style="width: 100%;" placeholder="请输入最大值" :disabled="limitRange.optionUpper" controls-position="right" />
              </el-col>
              <el-col :span="3" style="text-align: right;">
                <el-checkbox v-model="limitRange.optionUpper" label="无限制">不限定</el-checkbox>
              </el-col>
            </el-form-item>
          </el-col>
        </template>
        <!--日期型填空-->
        <template v-else-if="type === 'WJWTLX_07'">
          <el-col :span="24">
            <el-form-item label="最早日期">
              <el-col :span="8">
                <el-date-picker v-model="limitRange.minOption" :disabled="limitRange.optionFloor" type="date" placeholder="选择开始日期" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
              </el-col>
              <el-col :span="3" style="text-align: right;">
                <el-checkbox v-model="limitRange.optionFloor" label="无限制">不限定</el-checkbox>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="最晚日期">
              <el-col :span="8">
                <el-date-picker v-model="limitRange.maxOption" :disabled="limitRange.optionUpper" type="date" placeholder="选择结束日期" style="width: 100%;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" />
              </el-col>
              <el-col :span="3" style="text-align: right;">
                <el-checkbox v-model="limitRange.optionUpper" label="无限制">不限定</el-checkbox>
              </el-col>
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="24">
          <el-form-item label="排序" prop="sort">
            <el-input v-model.trim="baseform.sort" placeholder="请输入排序号" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { number } from '@/utils/validate'

export default {
  name: 'Tiankong',
  props: {
    type: {
      type: String,
      default: '40'
    },
    getData: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      baseform: {
        stem: '',
        isMust: '1',
        sort: ''
      },
      baserules: {
        stem: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序号', trigger: 'blur' },
          { validator: number, trigger: 'blur' }
        ],
        isMust: [
          { required: true, message: '请选择是否必答', trigger: 'blur' }
        ]
      },
      limitRange: {
        optionFloor: true,
        optionUpper: true,
        minOption: '',
        maxOption: ''
      }
    }
  },
  watch: {
    type: function(val) {
      this.limitRange.optionFloor = true
      this.limitRange.optionUpper = true
      this.limitRange.minOption = ''
      this.limitRange.maxOption = ''
      if (val === 'WJWTLX_04') {
        this.limitRange.optionUpper = false
        this.limitRange.maxOption = 1
      }
    }
  },
  created() {
    if (this.getData && this.getData.id) {
      try {
        this.$set(this.baseform, 'stem', this.getData.stem)
        this.$set(this.baseform, 'isMust', this.getData.isMust)
        this.$set(this.baseform, 'sort', this.getData.sort)
        if (this.getData.questionJson) {
          this.$set(this, 'limitRange', JSON.parse(this.getData.questionJson))
        }
      } catch (error) {
        this.$message({
          type: 'error',
          message: '参数异常，请重试!',
          onClose: () => {
            this.$router.back()
          }
        })
      }
    } else {
      if (this.type === 'WJWTLX_04') {
        this.limitRange.optionFloor = false
        this.limitRange.optionUpper = false
        this.limitRange.maxOption = 1
      }
    }
  },
  methods: {
    getPostData() {
      if ((this.type === 'WJWTLX_05' || this.type === 'WJWTLX_06') && this.limitRange.optionFloor === false && this.limitRange.optionUpper === false && this.limitRange.maxOption < this.limitRange.minOption) {
        this.$message({
          message: '最大值不能小于最小值，请重新输入！',
          type: 'warning'
        })
        return false
      }
      if (this.type === 'WJWTLX_07' && this.limitRange.optionFloor === false && this.limitRange.optionUpper === false && new Date(this.limitRange.maxOption).getTime() < new Date(this.limitRange.minOption).getTime()) {
        this.$message({
          message: '最晚日期不能早于最早日期，请重新输入！',
          type: 'warning'
        })
        return false
      }
      let params = ''
      this.$refs.tiankongform.validate(valid => {
        if (valid) {
          params = {
            stem: this.baseform.stem,
            isMust: this.baseform.isMust,
            sort: this.baseform.sort,
            questionJson: JSON.stringify(this.limitRange)
          }
        }
      })
      return params
    }
  }
}
</script>

<style lang="scss">
.question-tiankong {
  .el-form-item.fixed .el-form-item__content {
    display: flex;
    align-items: center;

    .el-input {
      width: auto;
    }

    .score-tip {
      margin-left: 20px;
      color: red;
    }
  }

  .el-radio-group {
    width: 100%;
  }

  .options .el-form-item__content {
    display: flex;
    align-items: center;

    .el-input {
      width: 100%;
      margin-right: 20px;
    }
  }

  .option-rightasnwer {
    display: inline-block;
    flex-shrink: 0;
    font-size: 14px;
    color: green;
    margin-right: 10px;
  }

  .order-fixed {
    margin: 10px 0;
    padding-left: 100px;
  }

  .remove-option {
    cursor: pointer;
  }

  .add-optiopn {
    margin-left: 100px;
  }

  .tip {
    padding-left: 100px;
    padding-bottom: 10px;
    color: red;

    div {
      margin-top: 10px;
    }
  }
}
</style>
